<template>
  <div class="echarts_4_container">
    <div id="echarts_4"></div>
  </div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts'

const materialUserEcharts = () => {
  var chartDom = document.getElementById('echarts_4')
  var myChart = echarts.init(chartDom)
  var option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      // 图例
      data: ['本月', '今年'],
      textStyle: {
        fontSize: 15,
        color: '#bccde0'
      },
      itemHeight: 10,
      itemWidth: 15,
      right: 20 // 图例位置
    },
    grid: {
      top: '15%',
      left: '10%',
      right: '10%',
      bottom: '10%'
    },
    xAxis: [
      {
        type: 'category',
        data: ['test1', 'test2', 'test3', 'test4', 'test5'],
        axisLabel: {
          interval: 0,
          // rotate: -10,
          textStyle: {
            fontSize: 15 // x轴字体大小
          }
        },
        axisPointer: {
          type: 'shadow'
        },
        axisTick: {
          show: false // 隐藏x轴的刻度
        }
      }
    ],
    yAxis: [
      {
        // 柱状y轴格式调整
        type: 'value',
        interval: 10,
        splitLine: {
          lineStyle: {
            type: 'dashed', // 设置网格为虚线
            color: '#182335',
            opacity: 0
          }
        }
      },
      {
        // 折线y轴格式调整
        type: 'value',
        axisTick: {
          show: false
        },
        splitLine: {
          lineStyle: {
            type: 'dashed', // 设置网格为虚线
            color: 'rgba(255,255,255,0)'
          }
        }
      }
    ],
    series: [
      {
        name: '本月',
        type: 'bar',
        yAxisIndex: 0,
        barWidth: 25, // 柱状图宽度
        tooltip: {
          valueFormatter: function (value) {
            return value
          }
        },
        data: [89, 45, 56, 80, 67],
        itemStyle: {
          // 柱状图上显示数字
          normal: {
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#fff'
              }
            }
          }
        },
        color: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          type: 'linear',
          global: false,
          colorStops: [
            // {
            //   offset: 0, // 0%处的颜色
            //   color: 'rgba(19, 129, 214,1)'
            // },
            {
              offset: 0,
              color: 'rgba(12, 25, 53,1)'
            },
            {
              offset: 0.2,
              color: 'rgba(12, 25, 53,1)'
            },
            // {
            //   offset: 0.3,
            //   color: 'rgba(12, 25, 53,1)'
            // },
            {
              offset: 0.5, // 0%处的颜色
              color: 'rgba(12, 64, 148,1)'
            },
            // {
            //   offset: 0.7, // 0%处的颜色
            //   color: 'rgba(20, 148, 249,1)'
            // },
            {
              offset: 0.8, // 0%处的颜色
              color: 'rgba(20, 148, 249,1)'
            },
            // {
            //   offset: 0.9, // 0%处的颜色
            //   color: 'rgba(20, 148, 249,1)'
            // },
            {
              offset: 1,
              color: 'rgba(21, 150, 251,1)'
            }
          ]
        },
        showBackground: false,
        backgroundStyle: {
          color: 'rgba(13, 22, 39, 1)'
        }
      },

      {
        name: '今年',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value
          }
        },
        data: [90, 45, 56, 80, 67],
        itemStyle: {
          normal: {
            color: '#d0deee', // 改变折线点的颜色
            lineStyle: {
              color: '#919eaf' // 折线颜色
            }
          }
        }
      }
    ]
  }

  option && myChart.setOption(option)
}

onMounted(() => {
  materialUserEcharts()
})
</script>

<style lang="less">
.echarts_4_container {
  #echarts_4 {
    width: 600px;
    height: 400px;
  }
}
</style>
